<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>循环结构</title>
	<body>
		<div id="app">
			<!-- vue使用双向数据绑定的结构
				案例: 1.input文本输入框
					  2.textarea 文本域
					  3.select下拉框
					  4.radio 单选框
					  5.checkbox复选框
			 -->
			<form action="xxxxx">
				<h1>表单数据提交-数据封装</h1>
				姓名: <input  type="text" v-model="user.username"  /><br>
				详情: <textarea v-model="user.info"></textarea><br>
					 <!-- 如果下拉框支持多选 multiple="true"-->
				城市: <select name="city" v-model="user.city" multiple="true">
						<option value="北京">北京</option>
						<option value="上海">上海</option>
						<option value="成都">成都</option>
				      </select><br>
				性别: 
					  <input type="radio" value="男" name="gender"  v-model="user.gender"/>男
					  <input type="radio" value="女" name="gender"  v-model="user.gender"/>女
			</form>
			
			
			
			
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					user: {
						username: '',
						info: '添加用户详情信息',
						//如果数据单值采用字符串, 如果是多值 采用数组
						city: ['北京','上海'],
						gender: '女'
					}
				},
				methods: {
				}
			}) 
		</script>
	</body>
</html>